<template>
  <div class="tab-wrap">
    <div 
      class="tab-item" 
      v-for="(item, index) in tabOptions" 
      :key="index"
      :class="{active: currentTab === item.key}" 
      @click="handleTabClick(item)">
      {{item.name}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyTab',
  props: {
    modelValue: {
      type: Array,
      default: () => []
    },
    options: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      currentTab: '',
      defaultTabOptions: [
        {
          key: '1',
          name: '菜单1'
        },
        {
          key: '2',
          name: '菜单2'
        }
      ]
    }
  },
  computed: {
    tabOptions() {
      // 如果传入了自定义选项，则使用传入的选项，否则使用默认选项
      return this.options.length > 0 ? this.options : this.defaultTabOptions
    }
  },
  mounted() {
    // 初始化默认选中第一个选项
    if (this.tabOptions.length > 0) {
      this.handleTabClick(this.tabOptions[0])
    }
  },
  methods: {
    handleTabClick(item) {
      this.currentTab = item.key
      // 更新 v-model 绑定的值
      this.$emit('update:modelValue', this.currentTab)
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-wrap {
  margin: 4px 0 0 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .tab-item {
    min-width: 64px;
    height: 19px;
    line-height: 19px;
    color: #fff;
    text-align: center;
    background: url(@/assets/images/screen/33.png) no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    margin-left: -4px;
    padding: 0 5px;
    font-size: 14px;
    &.active {
      background: url(@/assets/images/screen/32.png) no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style> 